<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
          .dailog{
              width: 300px;
              height: 200px;
              border: #CCCCCC solid 1px;
              border-radius: 10px;
              position: fixed;
              left: 30%;
              top: 100px;
              
          }
          .ishid{
              display: none;
          }
        </style>
    </head>
    <body>
        <div id="container">
            父组件控制子组件的显示：
            <input type="button" :value="[isshow==true?'隐藏':'显示']" @click="isshow=!isshow" />
            <br />
            <mydialog  :visible.sync="isshow"></mydialog>
        </div>
      
        <script>
            var mydialog={
    
                props:{
                    visible:{
                        type:Boolean,
                        default:false
                    }
                },
         
                methods:{
                    close(){
                      //触发事件 
                      this.$emit("update:visible",false);
                    }
                },
                template:
                `
                <div class="dailog" :class="{ishid:!visible}">
                    <input type="button" value="关闭" @click="close" />
                </div>
                `
            };
            new Vue({
                el:"#container",
                data:{
                    isshow:false //控制是否显示子组件 
                },
                components:{
                    mydialog
                },
                methods:{
                    /* chg($event){
                        this.isshow=$event;
                    } */
                }
            });
        </script>
    </body>
</html>
